<!--
 * @Author: your name
 * @Date: 2021-12-08 14:36:10
 * @LastEditTime: 2024-02-01 13:42:42
 * @LastEditors: zss
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \wy\src\components\base\grid\o-base-chart\index.vue
-->
<template>
  <div class="wy-chart" :class="isExpand ? 'chart-expand' : ''">
    <div
      class="chart-shape"
      :id="title + '_' + identification"
      ref="wy-chart"
    ></div>
    <!-- ref不要放到上层div mounted的$elementDetecter会给元素添加position:relative属性 会与放大全屏冲突 -->
    <div class="chart-toolbar" v-if="!hideFullScreen">
      <Icon
        :type="isExpand ? 'ios-contract' : 'ios-expand'"
        @click="chartExpand()"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { getOption } from '@/config/echarts.config';
import { Tsrv } from '@/services';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

const echarts = require('echarts');

@Component({})
export default class OBaseChart extends Vue {
  @Prop({
    type: Object,
    default: () => {}
  })
  config!: any;

  @Prop({
    type: Array,
    default: () => {}
  })
  localData!: any;

  @Prop({
    type: Boolean,
    default: false
  })
  hideFullScreen: boolean;

  @Prop({
    type: String,
    default: 'grid'
  })
  identification: string;

  @Prop({
    type: String,
    default: 'F'
  })
  title!: string;

  @Watch('localData')
  localDataChange(val: any) {
    this.chartsChange();
  }

  public compName: string = 'oBaseChart';

  private chartRender: any = null;

  private option: any = null;

  public isExpand: boolean = false;

  created() {}

  mounted() {
    this.init();
    this.chartsChange();
    const shfi = this.$elementDetecter();
    shfi.listenTo(this.$refs['wy-chart'], (e: any) => {
      this.chartResize();
    });
  }

  public init() {
    if (this.config.isShow) {
      const shapeID = `${this.title}_${this.identification}`;
      const L_dom = document.getElementById(shapeID);
      this.chartRender = echarts.init(L_dom);
      this.option = getOption(
        this.config.x,
        this.config.y,
        this.config.grid,
        this.config.shapes
      );
    }
  }

  private chartsChange() {
    this.option.dataset.source = Tsrv.utils.clone(this.localData, true);
    this.chartRender.setOption(this.option);
  }

  private chartExpand(key: any, index: any) {
    this.isExpand = !this.isExpand;
    this.$nextTick(() => {
      this.chartResize();
    });
  }

  private chartResize() {
    if (this.chartRender) {
      this.chartRender.resize();
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-expand {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.wy-chart {
  height: 100%;
  .chart-shape {
    height: 100%;
    width: 100%;
    padding: 20px 10px;
    background-color: #fff;
  }
  .chart-toolbar {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    .ivu-icon {
      font-size: 16px;
      cursor: pointer;
    }
  }
  &:hover {
    .chart-toolbar {
      display: block;
    }
  }
}
</style>
